<template>
	<view>
		<view class="header">
			<text>修改回单</text>
			<view class="btn_bc">
				<button type="default" size="mini"><text class="text">保存</text></button>
			</view>
			<view class="btn_tj">
				<button type="default" size="mini"><text class="text">提交</text></button>
			</view>
		</view>

		<!-- 填表 -->
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
			@scrolltolower="lower" @scroll="scroll">
			<view class="titlebar">
				<text>用户信息</text>
			</view>
			<!-- 用户信息 -->
			<view class="user">
				<view class="username">
					<text>用户姓名:</text>
				</view>
				<!-- 输入用户姓名 -->
				<view class="sr_input">
					<input class="uni-input" placeholder="请输入用户姓名" />
				</view>
			</view>
					<view class="line-h"></view>

			<view class="user">
				<view class="username">
					<text>联系电话:</text>
				</view>
				<!-- 输入联系电话 -->
				<view class="sr_input">
					<input class="uni-input" placeholder="请输入联系电话" />
				</view>
			</view>
			<view class="line-h"></view>

			<view class="user">
				<view class="username">
					<text>所在区域:</text>
				</view>
				
				
				<!-- 输入所在区域 -->
				<view >				
							<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
								<view class="uni-input1">{{multiArray[0][multiIndex[0]]}}{{multiArray[1][multiIndex[1]]}}{{multiArray[2][multiIndex[2]]}}
								<uni-icons class="text_bj2" type="arrowright" style="float:right;padding-right:4px;"
								size="20" >
								</uni-icons>
								</view>
								
							</picker>		
				</view>
				
			</view>
			<view class="line-h"></view>

			<view class="user">
				<view class="username">
					<text>详细地址:</text>
				</view>
				<!-- 输入详细地址 -->
				<view class="sr_input">
					<input class="uni-input" placeholder="请输入详细地址" />
				</view>
			</view>




			<!-- 购买信息 -->
			<view class="titlebar">
				<text>购买信息</text>
			</view>

			<view class="user">
				<view class="username">
					<text>购买商城:</text>
				</view>
				<!-- 输入商城 -->
				<view class="sr_input">
					<input class="uni-input" placeholder="请输入商城名称" />
				</view>
			</view>
			<view class="line-h"></view>

			<view class="user">
				<view class="username">
					<text>购买日期:</text>
				</view>
				<!-- 输入日期 -->
				<view class="sr_input">
					<!-- value 表示选中的日期，格式为"YYYY-MM-DD"
				     start 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD" 
					 end   表示有效日期范围的结束，字符串格式为"YYYY-MM-DD" :end="endDate"
				 -->
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input" style="margin-left: 45px;">{{date}}</view>
					</picker>
				</view>
			</view>



			<!-- 业务信息 -->
			<view class="titlebar">
				<text>业务信息</text>
			</view>
			<!-- 楼层高度 -->
			<view class="user">
				<view class="username">
					<text>楼层高度:</text>
				</view>
				<!-- 输入楼层高度 -->
				<view class="sr_input">
					<input class="uni-input" placeholder="请输入楼层高度" />
				</view>
			</view>


			<!-- 房间面积 -->
			<view class="user">
				<view class="username">
					<text>房间面积:</text>
				</view>
				<!-- 输入房间面积 -->
				<view class="sr_input">
					<input class="uni-input" placeholder="请输入房间面积" />
				</view>
			</view>
			<view class="line-h"></view>

			<!-- 机器信息 -->
			<view class="titlebar">
				<text>机器信息</text>
			</view>
			<view class="xh1_css">
				<view class="xh1">
					<text>型号1</text>
				</view>

			</view>
			<view class="line-h"></view>

			<view class="userdata">
				<text>飞利浦033329989988</text>
			</view>
			<view class="line-h"></view>

			<view class="userdata">
				<text>内机条码</text>
				<uni-icons type="scan" style="float:right;padding-right:4px;" size="20" @click="shaoma"></uni-icons>
			</view>
			<view class="line-h"></view>

			<view class="text_bj">
				<input type="text" style="font-size: 12px; width: 250px;" value="100369NK51000304352" disabled />
				<text class="text_bjt">编辑</text>
			</view>
			<view class="line-h"></view>

			<view class="userdata">
				<text>外机机条码</text>
				<uni-icons type="scan" style="float:right;padding-right:4px;" size="20" @change='shaoma'></uni-icons>
			</view>
			<view class="line-h"></view>

			<view class="text_bj">
				<input type="text" style="font-size: 12px; width: 250px;" disabled />
				<text class="text_bjt">编辑</text>
			</view>
			<view class="line-h"></view>

			<!-- 现场照片 -->
			<view class="userdata">
				<text>现场照片</text>
			</view>

			<view class="tp_color">
				<!-- 上半图片 -->
				<view class="photo_xc">
					<uni-file-picker class="photo_ty" disable-preview :del-icon="false" return-type="object"
						:image-styles="imageStyles">
					</uni-file-picker>
					<uni-file-picker class="photo_ty" disable-preview :del-icon="false" return-type="object"
						:image-styles="imageStyles">
					</uni-file-picker>

					<uni-file-picker class="photo_ty" disable-preview :del-icon="false" return-type="object"
						:image-styles="imageStyles">
					</uni-file-picker>
				</view>

				<view class="text_xc">
					<text class="text_ty">内机条码</text>
					<text class="text_ty">外机条码</text>
					<text class="text_ty">上墙照</text>
				</view>

				<view class="cklz_xc">
					<view class="lz_ty">
						<uni-icons type="eye-filled" size="20" color="#007AFF"></uni-icons>
						<text>查看例子</text>
					</view>
					<view class="lz_ty">
						<uni-icons type="eye-filled" size="20" color="#007AFF"></uni-icons>
						<text>查看例子</text>
					</view>
					<view class="lz_ty">
						<uni-icons type="eye-filled" size="20" color="#007AFF"></uni-icons>
						<text>查看例子</text>
					</view>
				</view>



				<!-- 下半图片 -->
				<view class="photo_xc">
					<uni-file-picker class="photo_ty" disable-preview :del-icon="false" return-type="object"
						:image-styles="imageStyles">
					</uni-file-picker>

					<uni-file-picker class="photo_ty" disable-preview :del-icon="false" return-type="object"
						:image-styles="imageStyles">
					</uni-file-picker>

					<uni-file-picker class="photo_ty" disable-preview :del-icon="false" return-type="object"
						:image-styles="imageStyles">
					</uni-file-picker>
				</view>

				<view class="text_xc">
					<text class="text_xty">接线图照片</text>
					<text class="text_xty">抽真空照片</text>
					<text class="text_xty">其他</text>
				</view>


				<view class="cklz_xc">
					<view class="lz_ty">
						<uni-icons type="eye-filled" size="20" color="#007AFF"></uni-icons>
						<text>查看例子</text>
					</view>
					<view class="lz_ty">
						<uni-icons type="eye-filled" size="20" color="#007AFF"></uni-icons>
						<text>查看例子</text>
					</view>
					<view class="lz_ty">
						<uni-icons type="eye-filled" size="20" color="#007AFF"></uni-icons>
						<text>查看例子</text>
					</view>
				</view>
			</view>



		</scroll-view>
	</view>
</template>

<script>
	
	export default {
		
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				
				multiArray: [
					   ['广西', '广东'],
					   ['南宁市', '北海市'],
					   ['西乡塘区', '青秀区', '武鸣区']
				],
				multiIndex: [0, 0, 0],
				
				index: 0,
				date: currentDate,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				value: '',

				//图片样式
				imageStyles: {
					width: 100,
					height: 120,					 
				},
				listStyles: {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: 'blue',
						radius: 2
					}
				},

			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			/* 省份 */
			bindMultiPickerColumnChange: function(e) {
				console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)
				this.multiIndex[e.detail.column] = e.detail.value
			
				switch (e.detail.column) {
					case 0: //拖动第1列
						switch (this.multiIndex[0]) {
							case 0:
								this.multiArray[1] = ['南宁市', '北海市']
								this.multiArray[2] = ['西乡塘区', '青秀区', '武鸣区']
								break
							case 1:
								this.multiArray[1] = ['深圳市', '汕头市']
								this.multiArray[2] = ['南山区', '龙岗区']
								break
						}
						this.multiIndex.splice(1, 1, 0)
						this.multiIndex.splice(2, 1, 0)
						break
					case 1: //拖动第2列
						switch (this.multiIndex[0]) { //判断第一列是什么
							case 0:
								switch (this.multiIndex[1]) {
									case 0:
										this.multiArray[2] = ['西乡塘区', '青秀区', '武鸣区']
										break
									case 1:
										this.multiArray[2] = ['银海区','北部湾']
										break
								}
								break
							case 1:
								switch (this.multiIndex[1]) {
									case 0:
										this.multiArray[2] = ['南山区', '龙岗区']
										break
									case 1:
										this.multiArray[2] = ['潮阳区', '金平区']
										break
								}
								break
						}
						 this.multiIndex.splice(2, 1, 0)
						break
				}
				this.$forceUpdate()
			},
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 只允许通过相机扫码
			shaoma() {
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			}


		}
	}
</script>

<style lang="scss">
	.text_bj2{
		
		font-size: 14px;
		
		padding-bottom: 5px;
		margin-left: 80px 
		
		
	}
	.uni-input{
		height: 20px;
		margin-left: 20px;
		//text-align: center;
		size: 20;
		
	}
	.uni-input{
		
		height: 20px;
		margin-left: 20px;
		margin-top: 5px;
		text-align: center;
		size: 20;
		
	}
	.uni-input1{
		height: 20px;
		margin-left: 55px;
		margin-top: 5px;
		text-align: center;
		size: 20;
		
	}
	.flie_css {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.sf_pz {
		align-self: center;
	}

	.input_sf_ty {
		margin-left: 15px;
		/* background-color: #007AFF; */
	}

	.sf_ty_css {
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
		font-size: 13px;
	}

	.sf_css {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		background-color: #FFFFFF;
	}

	.header {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		/* justify-content: space-between; */
		/* margin-top: 2px; */
		padding-top: 5px;
		padding-bottom: 10px;
		background-color: #ffffff;
		height: 40px;
	}


	page {
		width: 100%;
		background-color: #EEEEEE;
		min-height: 100%;
	}


	.btn {
		font-size: 5px;

	}

	button::after {
		border: none;

	}

	.text {
		color: #007AFF;
	}

	/* 提交 */
	.btn_bc {
		/* 相对定位 relative */
		/*position: relative;
		left: 90px;
		top: 10px; */
		/* 绝对定位 absolute*/
		position: absolute;
		right: 65px;
		top: 10px;

	}

	/* 提交 */
	.btn_tj {
		/* 相对定位 relative */
		/*position: relative;
		left: 90px;
		top: 10px; */
		/* 绝对定位 absolute*/
		position: absolute;
		right: 5px;
		top: 10px;
	}

	/* 通用样式 */
	.userdata {
		font-size: 14px;
		/* margin-bottom: 100px; */
		padding-top: 5px;
		padding-bottom: 5px;
		background-color: #FFFFFF;

	}

	.titlebar {
		font-size: 14px;
		/* margin-bottom: 100px; */
		padding-top: 5px;
		padding-bottom: 5px;
		/* background-color: #aaa7a6; */
	}

	.user {
		font-size: 15px;
		display: flex;
		background-color: #FFFFFF;
		/* 		padding-top: 5px;
		padding-bottom: 5px; */

	}

	.username {
		width: 65px;
		/* background-color: #4CD964; */
		padding-top: 5px;
		padding-bottom: 5px;

	}
	.line-h {
		height: 1rpx;
		background-color: #cccccc;
	}
	.sr_input {
		/* 相对定位 */
		/* width: 200px;
		height: 20px;
		font-size: 14px;
	    background-color: #5555ff;
		position: relative;
		float: left;
		top: -65rpx;
		left: 140rpx;
		
		padding-top: 5px;
		padding-bottom: 6px; */

		margin-left: 20px;
	}

	.xh1_css {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		background-color: #FFFFFF;
	}

	.xh1 {
		margin-top: 5px;
		font-size: 14px;
	}

	.btn_xh {
		align-self: center;
	}

	.text_bj {
		/* font-size: 14px; */
		/* margin-bottom: 100px; */
		/* 	padding-top: 5px; */
		/* padding-bottom: 5px; */
		/* 	text-align: right; */
		/* 	margin-right: 3px; */
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

	}

	.text_bjt {
		font-size: 14px;
		padding-top: 5px;
		padding-bottom: 5px;
		margin-right: 5px;
		/* position: relative;
		left: 340rpx; */
		float: right;
		;
	}

	.photo_xc {
		/* 水平布局 */
		display: flex;
		/* margin-left: 10px; */
		flex-direction: row;
		justify-content: space-around;
		padding-top: 5px;
		background-color: #ffffff;
	}

	.photo_ty {
		margin-left: 15px;
		margin-right: 15px;
	}

	.lz_ty {
		/* margin-top: 0px;
		padding-top: 0px;
		margin-left: 20px;
		margin-right: 15px; */
		color: #007AFF;
	}

	.text_ty {
		font-size: 12px;
		/* margin-left: 40px;
		margin-right: 30px; */
	}

	.text_xty {
		font-size: 12px;
		/* 	margin-left: 30px;
		margin-right: 30px; */
		background-color: #FFFFFF;
	}

	.text_xc {
		/* 水平布局 */
		display: flex;
		/* margin-left: 10px; */
		flex-direction: row;
		justify-content: space-around;
		z-index: 1;
		background-color: #FFFFFF;

		/* 相对位置 */
		position: relative;
		bottom: 30px;
		right: 8px;
	}

	.tp_color {
		background-color: #FFFFFF;
	}

	.cklz_xc {
		/* 水平布局 */
		display: flex;
		/* margin-left: 10px; */
		flex-direction: row;
		justify-content: space-around;
		position: relative;
		bottom: 10px;

	}
</style>
